<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
 lang="en" dir="ltr">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="../codebase/default.css" type="text/css" media="screen" title="no title" charset="utf-8"><title>
    others:toc_dhtmlx_2_0_step_by_step    [DHX documentation]
  </title></head>

<body>
<div class="dokuwiki">
  
  <div class="stylehead">

    <div class="header">
    <a class="logo" href="http://dhtmlx.com" title="DHTMLX Home Page"></a>
    <span class="tittle-dhtmlx">DHTMLX Docs & Samples Explorer</span>

    <div class="search-field">
        <form action="/dhtmlx/docs/doku.php" accept-charset="utf-8" id="dw__search"><div class="no"><input type="hidden" name="do" value="search" /><input type="text" id="qsearch__in" accesskey="f" name="id" title="Search" /><button type="submit"></button><div id="qsearch__out" class="ajax_qsearch JSpopup"></div></div></form>    </div>
        <div class="buttons">
                <a class="doc"></a>
                <a title="DHTMLX Samples homepage" href="../samples.html" class="sample"/></a>
        </div>
     <!-- <div class="pagename">
        [[<a href="#"  title="Backlinks">others:toc_dhtmlx_2_0_step_by_step</a>]]
      </div>
      <div class="logo">
        <a href="/dhtmlx/docs/doku.php"  name="dokuwiki__top" id="dokuwiki__top" accesskey="h" title="[H]">DHX documentation</a>      </div>

      <div class="clearer"></div>-->
        
    </div>

    
<!--   <div class="bar" id="bar__top">
      <div class="bar-left" id="bar__topleft">
        <form class="button btn_edit" method="post" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="" /><input type="hidden" name="id" value="others:toc_dhtmlx_2_0_step_by_step" /><input type="submit" value="Edit this page" class="button" accesskey="e" title="Edit this page [E]" /></div></form>        <form class="button btn_revs" method="get" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="revisions" /><input type="hidden" name="id" value="others:toc_dhtmlx_2_0_step_by_step" /><input type="submit" value="Old revisions" class="button" accesskey="o" title="Old revisions [O]" /></div></form>      </div>

      <div class="bar-right" id="bar__topright">
        <form class="button btn_recent" method="get" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="recent" /><input type="hidden" name="id" value="others:toc_dhtmlx_2_0_step_by_step" /><input type="submit" value="Recent changes" class="button" accesskey="r" title="Recent changes [R]" /></div></form>        <form action="/dhtmlx/docs/doku.php" accept-charset="utf-8" id="dw__search"><div class="no"><input type="hidden" name="do" value="search" /><input type="text" id="qsearch__in" accesskey="f" name="id" title="Search" /><button type="submit"></button><div id="qsearch__out" class="ajax_qsearch JSpopup"></div></div></form>&nbsp;
      </div>

      <div class="clearer"></div>
    </div> -->

<!--        <div class="breadcrumbs">
      <span class="bchead">Trace:</span> <span class="bcsep">&raquo;</span> <span class="curid"><a href="/dhtmlx/docs/doku.php?id=others:toc_dhtmlx_2_0_step_by_step"  class="breadcrumbs" title="others:toc_dhtmlx_2_0_step_by_step">toc_dhtmlx_2_0_step_by_step</a></span>    </div>
    -->

    
  </div>
  
  
  <div class="page">
    <!-- wikipage start -->
    <!-- TOC START -->
<div class="toc">
<div class="tocheader toctoggle" id="toc__header">Table of Contents</div>
<div id="toc__inside">

<ul class="toc">
<li class="clear">

<ul class="toc">
<li class="level2"><div class="li"><span class="li"><a href="#dhtmlx_2.0._step_by_step" class="toc">dhtmlx 2.0. Step by Step</a></span></div>
<ul class="toc">
<li class="level3"><div class="li"><span class="li"><a href="#step_1._create_html_file" class="toc">Step 1. Create HTML File.</a></span></div></li>
<li class="level3"><div class="li"><span class="li"><a href="#step_2._insert_dhtmlx_library_file" class="toc">Step 2. Insert DHTMLX Library File</a></span></div></li>
<li class="level3"><div class="li"><span class="li"><a href="#step_3._prepare_html_page" class="toc">Step 3. Prepare HTML Page</a></span></div></li>
<li class="level3"><div class="li"><span class="li"><a href="#step_4._choose_layout_for_application" class="toc">Step 4. Choose Layout for Application</a></span></div></li>
<li class="level3"><div class="li"><span class="li"><a href="#step_5._adjust_panel_sizes" class="toc">Step 5. Adjust Panel Sizes</a></span></div></li>
<li class="level3"><div class="li"><span class="li"><a href="#step_6._define_panel_headers" class="toc">Step 6. Define Panel Headers</a></span></div></li>
<li class="level3"><div class="li"><span class="li"><a href="#step_7._add_top_menu" class="toc">Step 7. Add Top Menu</a></span></div></li>
<li class="level3"><div class="li"><span class="li"><a href="#step_8._add_toolbar" class="toc">Step 8. Add Toolbar</a></span></div></li>
<li class="level3"><div class="li"><span class="li"><a href="#setting_icons_or_images_paths_for_components" class="toc">Setting Icons or Images Paths for Components</a></span></div></li>
<li class="level3"><div class="li"><span class="li"><a href="#step_9._add_tree_and_populate_with_data" class="toc">Step 9. Add Tree and Populate with Data</a></span></div></li>
<li class="level3"><div class="li"><span class="li"><a href="#step_10._add_grid_and_load_directory_content" class="toc">Step 10. Add Grid and Load Directory Content</a></span></div></li>
<li class="level3"><div class="li"><span class="li"><a href="#step_11._add_folders_and_load_directory_content" class="toc">Step 11. Add Folders and Load Directory Content</a></span></div></li>
<li class="level3"><div class="li"><span class="li"><a href="#step_12._activate_relations_between_left_and_right_parts" class="toc">Step 12. Activate Relations between Left and Right Parts</a></span></div></li>
<li class="level3"><div class="li"><span class="li"><a href="#conclusion" class="toc">Conclusion</a></span></div></li></ul>
</li></ul>
</li></ul>
</div>
</div>
<!-- TOC END -->

<p>
<div class='backlinks'><div class='backlink last_backlink'><img src="icons___file.gif"  class="media" alt="" /><a href="index.html" class="wikilink1" title="start">Index</a></div><div class='arrow'></div><div class='backlink last_backlink'><a href="/dhtmlx/docs/doku.php?id=others:toc" class="media" title="others:toc"></a><a href="/dhtmlx/docs/doku.php?id=others:toc" class="wikilink2" title="others:toc" rel="nofollow">others</a></div></div>

</p>

<h2><a name="dhtmlx_2.0._step_by_step" id="dhtmlx_2.0._step_by_step">dhtmlx 2.0. Step by Step</a></h2>
<div class="level2">

<p>
The purpose of this tutorial is to show in step-by-step manner the easy way of building complex interface for <acronym title="Asynchronous JavaScript and XML">AJAX</acronym> based application with the help of DHTMLX library.  This tutorial contains main stream - which describes the process of building Windows like file explorer and some includes (marked with orange border) which describes more complex functionality or provides more details about some things which don&#039;t relate to File Explorer development.
</p>

<p>
This tutorial is actual for dhtmlxSuite 2008 Rel.3 (initial release of dhtmlx 2.0). Further versions of dhtmlx components can contain some extra functionality which is not described here. Or some functionality can be used in some more convenient way.
</p>

<p>
Files related to this tutorial can be downloaded here: <a href="/dhtmlx/docs/lib/exe/fetch.php?media=others:dhtmlx20_tutorial.zip" class="media mediafile mf_zip" title="others:dhtmlx20_tutorial.zip">dhtmlx20_tutorial.zip</a>
</p>

</div>
<div class="secedit"><form class="button btn_secedit" method="post" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="lines" value="49-887" /><input type="hidden" name="rev" value="1270025685" /><input type="hidden" name="id" value="others:toc_dhtmlx_2_0_step_by_step" /><input type="submit" value="Edit" class="button" title="dhtmlx 2.0. Step by Step" /></div></form></div>
<h3><a name="step_1._create_html_file" id="step_1._create_html_file">Step 1. Create HTML File.</a></h3>
<div class="level3">

<p>
Any front end of <acronym title="Asynchronous JavaScript and XML">AJAX</acronym> based application is <acronym title="HyperText Markup Language">HTML</acronym> page. So, let&#039;s create a simple <acronym title="HyperText Markup Language">HTML</acronym> page:
</p>
<pre class="code javascript">    <span class="sy0">&lt;</span>html<span class="sy0">&gt;</span>
    <span class="sy0">&lt;</span>head<span class="sy0">&gt;</span>
        <span class="sy0">&lt;</span>title<span class="sy0">&gt;</span>AJAX Application<span class="sy0">&lt;/</span>title<span class="sy0">&gt;</span>
    <span class="sy0">&lt;/</span>head<span class="sy0">&gt;</span>
    <span class="sy0">&lt;</span>body<span class="sy0">&gt;</span>
    <span class="sy0">&lt;/</span>body<span class="sy0">&gt;</span>
    <span class="sy0">&lt;/</span>html<span class="sy0">&gt;</span>
&nbsp;</pre>
<p>

For further steps we&#039;ll use DHTMLX files concatenated with libCompiler, which is delivered within dhtmlxSuite and provides the possibility to unite all necessary components, functionality and appearance in single script file and single folder of necessary images.
</p>

</div>
<div class="secedit"><form class="button btn_secedit" method="post" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="lines" value="888-1424" /><input type="hidden" name="rev" value="1270025685" /><input type="hidden" name="id" value="others:toc_dhtmlx_2_0_step_by_step" /><input type="submit" value="Edit" class="button" title="Step 1. Create HTML File." /></div></form></div>
<h3><a name="step_2._insert_dhtmlx_library_file" id="step_2._insert_dhtmlx_library_file">Step 2. Insert DHTMLX Library File</a></h3>
<div class="level3">

<p>
If you do not have <acronym title="Hypertext Preprocessor">PHP</acronym> on the server where you inflated dhtmlxSuite archive to, then you can just choose from the presets which already exists in the package (see directory “presets” in the root of the package). To get all available possibilities, just get preset “full”.
If you have <acronym title="Hypertext Preprocessor">PHP</acronym> and you do want to create your own set of components and functionality, then brows to libCompiler/index.html. There you&#039;ll see tree of available components with nested nodes representing available functionality and possible variants of skinning on the right side. You have two options from now:
</p>
<ul>
<li class="level1"><div class="li">  choose preset from the dropdown list above the tree (after you make a selection it will check checkboxes near chosen components/functionality). You&#039;ll be able to extend selection or uncheck unnecessary points before generating resulting file. Also choose what skin you&#039;d like to use for the application (on right side of libCompiler interface).</div>
</li>
<li class="level1"><div class="li">  or just start from bland print and check just necessary points yourself</div>
</li>
</ul>

<p>
I would choose the first option. Moreover, on stage of development I would use “full” preset keeping the possibility to decrease the file size for the final stage of development. Well, either way you go, you&#039;ll get two files (js and css) and a folder with images at the end. Files are: dhtmlx.js and dhtmlx.css, folder name is imgs. Put all where you need them (css and imgs should be put togather as you got them). I put in the codebase directory in the root folder of my future app. And added js and css files to the html I have:
</p>
<pre class="code javascript">    <span class="sy0">&lt;</span>html<span class="sy0">&gt;</span>
    <span class="sy0">&lt;</span>head<span class="sy0">&gt;</span>
        <span class="sy0">&lt;</span>title<span class="sy0">&gt;</span>AJAX Application<span class="sy0">&lt;/</span>title<span class="sy0">&gt;</span>
        <span class="sy0">&lt;</span>script src<span class="sy0">=</span><span class="st0">&quot;codebase/dtmlx.js&quot;</span><span class="sy0">&gt;&lt;/</span>script<span class="sy0">&gt;</span>
        <span class="sy0">&lt;</span>link rel<span class="sy0">=</span><span class="st0">&quot;STYLESHEET&quot;</span> type<span class="sy0">=</span><span class="st0">&quot;text/css&quot;</span> href<span class="sy0">=</span><span class="st0">&quot;codebase/dhtmlx.css&quot;</span><span class="sy0">&gt;</span>
    <span class="sy0">&lt;/</span>head<span class="sy0">&gt;</span>
    <span class="sy0">&lt;</span>body<span class="sy0">&gt;</span>
    <span class="sy0">&lt;/</span>body<span class="sy0">&gt;</span>
    <span class="sy0">&lt;/</span>html<span class="sy0">&gt;</span>
&nbsp;</pre>
</div>
<div class="secedit"><form class="button btn_secedit" method="post" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="lines" value="1425-3279" /><input type="hidden" name="rev" value="1270025685" /><input type="hidden" name="id" value="others:toc_dhtmlx_2_0_step_by_step" /><input type="submit" value="Edit" class="button" title="Step 2. Insert DHTMLX Library File" /></div></form></div>
<h3><a name="step_3._prepare_html_page" id="step_3._prepare_html_page">Step 3. Prepare HTML Page</a></h3>
<div class="level3">

<p>
To prepare <acronym title="HyperText Markup Language">HTML</acronym> page for full-screen dhtmlxLayout, you need to set some parameters of body tag. This can be actual just for initial release of DHTMLX 2.0 and can be not necessary for newer releases:
</p>
<pre class="code javascript">    <span class="sy0">&lt;</span>body style<span class="sy0">=</span><span class="st0">&quot;width:100%; height:100%; margin:0px; overflow:hidden;&quot;</span><span class="sy0">&gt;</span>
&nbsp;</pre>
</div>
<div class="secedit"><form class="button btn_secedit" method="post" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="lines" value="3280-3622" /><input type="hidden" name="rev" value="1270025685" /><input type="hidden" name="id" value="others:toc_dhtmlx_2_0_step_by_step" /><input type="submit" value="Edit" class="button" title="Step 3. Prepare HTML Page" /></div></form></div>
<h3><a name="step_4._choose_layout_for_application" id="step_4._choose_layout_for_application">Step 4. Choose Layout for Application</a></h3>
<div class="level3">

<p>
There are some predefined layout structures you can choose from. All of them are shown in dhtmlxLayout documentation. Their names start with number (reflects number of panels) followed by letter. For File Explorer we need quite simple one - “2U”. Left panel for navigation tree and right one for directory content. To start coding I would add onload event handler to body and place all necessary code in event handler. Also, we need to define global variables for all necessary objects (left side navigation tree, folders and grid for directory view, menu and toolbar  for… for menu and toolbar ;). And layout itself of course.).
</p>

<p>
First we initialize full-screen layout.
</p>
<pre class="code javascript">    <span class="sy0">&lt;</span>script<span class="sy0">&gt;</span>
        <span class="kw2">var</span> myLayout<span class="sy0">,</span> myTree<span class="sy0">,</span> myGrid<span class="sy0">,</span> myFolders<span class="sy0">,</span> myMenu<span class="sy0">,</span> myToolbar
        <span class="kw2">var</span> gl_view_type <span class="sy0">=</span> <span class="st0">&quot;icons&quot;</span>; <span class="co1">//icons,dlist,tiles ...</span>
        <span class="kw2">var</span> gl_view_bg <span class="sy0">=</span> <span class="st0">&quot;&quot;</span>; <span class="co1">//which component is used for directory content view - grid or folders, empty from start</span>
&nbsp;
&nbsp;
&nbsp;
        <span class="kw2">function</span> doOnLoad<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#123;</span>
            myLayout <span class="sy0">=</span> <span class="kw2">new</span> dhtmlXLayoutObject<span class="br0">&#40;</span>document.<span class="me1">body</span><span class="sy0">,</span> <span class="st0">&quot;2U&quot;</span><span class="sy0">,</span> <span class="st0">&quot;dhx_blue&quot;</span><span class="br0">&#41;</span>;
        <span class="br0">&#125;</span>
    <span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span>
&nbsp;
&nbsp;
&nbsp;
    <span class="sy0">&lt;</span>body <span class="kw3">onload</span><span class="sy0">=</span><span class="st0">&quot;doOnLoad()&quot;</span> style<span class="sy0">=</span><span class="st0">&quot;width:100%; height:100%; margin:0px; overflow:hidden;&quot;</span><span class="sy0">&gt;</span>
&nbsp;</pre>
</div>

<h4><a name="ways_of_initialization" id="ways_of_initialization">Ways of Initialization</a></h4>
<div class="level4">

<p>
Besides full screen initialization there are some others:
</p>
<ul>
<li class="level1"><div class="li"> window based (initialize layout inside dhtmlxWindow);</div>
</li>
<li class="level1"><div class="li">  object based (initialize layout inside some object on page, for example DIV);</div>
</li>
<li class="level1"><div class="li"> initialization inside another layout panel</div>
</li>
</ul>

<p>
 (Nested layouts topic is described below)
</p>

</div>

<h4><a name="unified_skins" id="unified_skins">Unified Skins</a></h4>
<div class="level4">

<p>
Some words about skins. dhtmlx components has various predefined skins. Since version 2.0, when we provide the possibility to unite different components under the application interface, we also added some skins which can be applied to entire interface. Under dhtmlxLayout all dhtmlx components get unified skin set for the layout automatically (but we keep the possibility to set skin to each component also). These unified skins names start with “dhx_”:<br/>

 dhx_black, dhx_light, dhx_lightblue. <br/>

So, using one of them as 3rd argument in dhtmlxLayout constructor you apply this skin on all dhtmlx components also.
</p>

</div>

<h4><a name="nested_layouts" id="nested_layouts">Nested Layouts</a></h4>
<div class="level4">

<p>
If non of predefined layouts suites you absolutely, you can combine structures inserting one into another. For example:

</p>
<pre class="code javascript">          myLayoutTop <span class="sy0">=</span> <span class="kw2">new</span> dhtmlXLayoutObject<span class="br0">&#40;</span>document.<span class="me1">body</span><span class="sy0">,</span> <span class="st0">&quot;2U&quot;</span><span class="br0">&#41;</span>;
          myLayoutIns <span class="sy0">=</span>  <span class="kw2">new</span> dhtmlXLayoutObject<span class="br0">&#40;</span>myLayoutTop.<span class="me1">cells</span><span class="br0">&#40;</span><span class="st0">&quot;a&quot;</span><span class="br0">&#41;</span><span class="sy0">,</span> <span class="st0">&quot;2U&quot;</span><span class="br0">&#41;</span>;
&nbsp;</pre>
<p>

This code creates 2U layout in the left panel of myLayoutTop layout. Thus you&#039;ll have 3 panels for further wok now:
</p>
<ul>
<li class="level1"><div class="li"> myLayoutTop.cells(“b”);</div>
</li>
<li class="level1"><div class="li"> myLayoutIns.cells(“a”);</div>
</li>
<li class="level1"><div class="li"> myLayoutIns.cells(“b”).</div>
</li>
</ul>

</div>
<div class="secedit"><form class="button btn_secedit" method="post" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="lines" value="3623-6367" /><input type="hidden" name="rev" value="1270025685" /><input type="hidden" name="id" value="others:toc_dhtmlx_2_0_step_by_step" /><input type="submit" value="Edit" class="button" title="Step 4. Choose Layout for Application" /></div></form></div>
<h3><a name="step_5._adjust_panel_sizes" id="step_5._adjust_panel_sizes">Step 5. Adjust Panel Sizes</a></h3>
<div class="level3">
<pre class="code javascript">        <span class="kw2">function</span> doOnLoad<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#123;</span>
            myLayout <span class="sy0">=</span> <span class="kw2">new</span> dhtmlXLayoutObject<span class="br0">&#40;</span>document.<span class="me1">body</span><span class="sy0">,</span> <span class="st0">&quot;2U&quot;</span><span class="sy0">,</span> <span class="st0">&quot;dhx_black&quot;</span><span class="br0">&#41;</span>;
            myLayout.<span class="me1">cells</span><span class="br0">&#40;</span><span class="st0">&quot;a&quot;</span><span class="br0">&#41;</span>.<span class="me1">setWidth</span><span class="br0">&#40;</span><span class="nu0">250</span><span class="br0">&#41;</span>;
        <span class="br0">&#125;</span>
&nbsp;</pre>
</div>

<h4><a name="using_panels_in_script" id="using_panels_in_script">Using Panels in Script</a></h4>
<div class="level4">

<p>
There are two ways to apply to panel:

</p>
<ul>
<li class="level1"><div class="li">  through the name (panels in dhtmlxLayout are named alphabetically: a,b,c,d etc.)</div>
</li>
</ul>
<pre class="code javascript">          dhxLayout.<span class="me1">cells</span><span class="br0">&#40;</span><span class="st0">&quot;a&quot;</span><span class="br0">&#41;</span>
&nbsp;</pre><ul>
<li class="level1"><div class="li">  through index (zero based)</div>
</li>
</ul>
<pre class="code javascript">          dhxLayout.<span class="me1">items</span><span class="br0">&#91;</span>0<span class="br0">&#93;</span>
&nbsp;</pre>
</div>

<h4><a name="panel_dimensions" id="panel_dimensions">Panel Dimensions</a></h4>
<div class="level4">

<p>
Besides width you can define panel height

</p>
<pre class="code javascript">myLayout.<span class="me1">cells</span><span class="br0">&#40;</span><span class="st0">&quot;a&quot;</span><span class="br0">&#41;</span>.<span class="me1">setHeight</span><span class="br0">&#40;</span><span class="nu0">250</span><span class="br0">&#41;</span>;</pre>
</div>
<div class="secedit"><form class="button btn_secedit" method="post" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="lines" value="6368-7056" /><input type="hidden" name="rev" value="1270025685" /><input type="hidden" name="id" value="others:toc_dhtmlx_2_0_step_by_step" /><input type="submit" value="Edit" class="button" title="Step 5. Adjust Panel Sizes" /></div></form></div>
<h3><a name="step_6._define_panel_headers" id="step_6._define_panel_headers">Step 6. Define Panel Headers</a></h3>
<div class="level3">

<p>
I&#039;ll leave header for the panel with folders tree and hide it for the panel with folder&#039;s content. Also, I&#039;ll change default header label (“a” for the panel in question) to “Folders”. 

</p>
<pre class="code javascript">    <span class="kw2">function</span> doOnLoad<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#123;</span>
        myLayout <span class="sy0">=</span> <span class="kw2">new</span> dhtmlXLayoutObject<span class="br0">&#40;</span>document.<span class="me1">body</span><span class="sy0">,</span> <span class="st0">&quot;2U&quot;</span><span class="sy0">,</span> <span class="st0">&quot;dhx_black&quot;</span><span class="br0">&#41;</span>;
        myLayout.<span class="me1">cells</span><span class="br0">&#40;</span><span class="st0">&quot;a&quot;</span><span class="br0">&#41;</span>.<span class="me1">setText</span><span class="br0">&#40;</span><span class="st0">&quot;Folders&quot;</span><span class="br0">&#41;</span>;
        myLayout.<span class="me1">cells</span><span class="br0">&#40;</span><span class="st0">&quot;b&quot;</span><span class="br0">&#41;</span>.<span class="me1">hideHeader</span><span class="br0">&#40;</span><span class="br0">&#41;</span>;
    <span class="br0">&#125;</span>
&nbsp;</pre>
<p>

Current version of dhtmlxLayout (2.0 build 80829) provides the possibility to collapse/expand panel with mouse click through header only. Thus if you hide header for the panel user will not be able to collapse this panel.
</p>

</div>
<div class="secedit"><form class="button btn_secedit" method="post" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="lines" value="7057-7733" /><input type="hidden" name="rev" value="1270025685" /><input type="hidden" name="id" value="others:toc_dhtmlx_2_0_step_by_step" /><input type="submit" value="Edit" class="button" title="Step 6. Define Panel Headers" /></div></form></div>
<h3><a name="step_7._add_top_menu" id="step_7._add_top_menu">Step 7. Add Top Menu</a></h3>
<div class="level3">

<p>
I&#039;ll create top menu with items more or less similar to those you can see in your Windows Explorer. You&#039;ll be able to find ready to use fileExplorerMenu.xml file in the package of this tutorial files (see link in the introduction). Most items are dsabled there, cause they are not the goal of this tutorial. <acronym title="Extensible Markup Language">XML</acronym> structure for dhtmlxMenu 2.0 can be found in <a href="http://www.dhtmlx.com/docs/products/dhtmlxMenu/doc/guide.html" style="text-decoration:underline;" class="urlextern" title="http://www.dhtmlx.com/docs/products/dhtmlxMenu/doc/guide.html"  rel="nofollow">dhtmlxMenu 2.0 documentation</a> or in the <a href="http://www.dhtmlx.com/docs/products/docsExplorer/doc/dhtmlxxml/index.html" style="text-decoration:underline;" class="urlextern" title="http://www.dhtmlx.com/docs/products/docsExplorer/doc/dhtmlxxml/index.html"  rel="nofollow">doc article</a> which describes <acronym title="Extensible Markup Language">XML</acronym> structures of all dhtmlx components.
</p>
<pre class="code javascript">    <span class="kw2">function</span> doOnLoad<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#123;</span>
        ...
        <span class="me1">myMenu</span> <span class="sy0">=</span> myLayout.<span class="me1">attachMenu</span><span class="br0">&#40;</span><span class="br0">&#41;</span>;
         myMenu.<span class="me1">setImagePath</span><span class="br0">&#40;</span><span class="st0">&quot;codebase/imgs/dhx_blue&quot;</span><span class="br0">&#41;</span>;
         myMenu.<span class="me1">loadXML</span><span class="br0">&#40;</span><span class="st0">&quot;xml/fileExplorerMenu.xml&quot;</span><span class="br0">&#41;</span>;
    <span class="br0">&#125;</span>
&nbsp;</pre>
</div>
<div class="secedit"><form class="button btn_secedit" method="post" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="lines" value="7734-8602" /><input type="hidden" name="rev" value="1270025685" /><input type="hidden" name="id" value="others:toc_dhtmlx_2_0_step_by_step" /><input type="submit" value="Edit" class="button" title="Step 7. Add Top Menu" /></div></form></div>
<h3><a name="step_8._add_toolbar" id="step_8._add_toolbar">Step 8. Add Toolbar</a></h3>
<div class="level3">

<p>
Same as with the menu, toolbar items will be more or less similar to Windows File Explorer toolbar. You&#039;ll be able to find ready to use fileExplorerToolbar.xml file in the package of this tutorial files (see link in the introduction). <acronym title="Extensible Markup Language">XML</acronym> structure for dhtmlxToolbar 2.0 can be found in <a href="http://www.dhtmlx.com/docs/products/dhtmlxToolbar/doc/guide.html" style="text-decoration:underline;" class="urlextern" title="http://www.dhtmlx.com/docs/products/dhtmlxToolbar/doc/guide.html"  rel="nofollow">dhtmlxToolbar 2.0 documentation</a> or in the <a href="http://www.dhtmlx.com/docs/products/docsExplorer/doc/dhtmlxxml/index.html" style="text-decoration:underline;" class="urlextern" title="http://www.dhtmlx.com/docs/products/docsExplorer/doc/dhtmlxxml/index.html"  rel="nofollow">doc article</a> which describes <acronym title="Extensible Markup Language">XML</acronym> structures of all dhtmlx components.
</p>
<pre class="code javascript">    <span class="kw2">function</span> doOnLoad<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#123;</span>
        ...
        <span class="me1">myToolbar</span> <span class="sy0">=</span> myLayout.<span class="me1">attachToolbar</span><span class="br0">&#40;</span><span class="br0">&#41;</span>;
        myToolbar.<span class="me1">setIconPath</span><span class="br0">&#40;</span><span class="st0">&quot;images/toolbar/&quot;</span><span class="br0">&#41;</span>;
         myToolbar.<span class="me1">loadXML</span><span class="br0">&#40;</span><span class="st0">&quot;xml/fileExplorerToolbar.xml&quot;</span><span class="br0">&#41;</span>;
    <span class="br0">&#125;</span>
&nbsp;</pre>
</div>
<div class="secedit"><form class="button btn_secedit" method="post" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="lines" value="8603-9412" /><input type="hidden" name="rev" value="1270025685" /><input type="hidden" name="id" value="others:toc_dhtmlx_2_0_step_by_step" /><input type="submit" value="Edit" class="button" title="Step 8. Add Toolbar" /></div></form></div>
<h3><a name="setting_icons_or_images_paths_for_components" id="setting_icons_or_images_paths_for_components">Setting Icons or Images Paths for Components</a></h3>
<div class="level3">

<p>
The difference in using setIconPath or setImagePath methods in dhtmlx components is the following: setIconPath defines the folder with graphical materials which are used in component but which are not parts of component - for example icons for buttons on toolbar, images in grid which represent some data. In most cases developer specifies the file names for these images (for example in <acronym title="Extensible Markup Language">XML</acronym>) and these images are not delivered within components package (but can be in some cases).
</p>

<p>
On the other hand setImagePath defines the path to folder with images which are parts of component. For example parts of component skin or  integral part of component functionality (like radiobutton or checkbox icons in grid, tree, menu or sorting arrow in grid, plus/minus signs in treegrid and tree). In all cases such images are delivered with components and located in codebase/imgs folder (or imgs folder inside preset directory for dhtmlx presets). So, setImagePath sets path to this imgs folder related to the page you use components on.
</p>

</div>
<div class="secedit"><form class="button btn_secedit" method="post" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="lines" value="9413-10502" /><input type="hidden" name="rev" value="1270025685" /><input type="hidden" name="id" value="others:toc_dhtmlx_2_0_step_by_step" /><input type="submit" value="Edit" class="button" title="Setting Icons or Images Paths for Components" /></div></form></div>
<h3><a name="step_9._add_tree_and_populate_with_data" id="step_9._add_tree_and_populate_with_data">Step 9. Add Tree and Populate with Data</a></h3>
<div class="level3">

<p>
Most dhtmlx components can be attached to the dhtmlxLayout panel with single command. You did this with Menu and Toolbar. Same with the tree. After attaching the component you can work with it - configure, populate with data. In case of tree, we need to pass one value inside attachTree method (same we do for dhtmlxTree constructor when use it) - id of tree super-root element (id attribute of “tree” node in <acronym title="Extensible Markup Language">XML</acronym> with tree structure). In most case “0” is ok.
</p>
<pre class="code javascript">    <span class="kw2">function</span> doOnLoad<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#123;</span>
        ...
        <span class="me1">myTree</span> <span class="sy0">=</span> myLayout.<span class="me1">cells</span><span class="br0">&#40;</span><span class="st0">&quot;a&quot;</span><span class="br0">&#41;</span>.<span class="me1">attachTree</span><span class="br0">&#40;</span><span class="st0">&quot;0&quot;</span><span class="br0">&#41;</span>;
        myTree.<span class="me1">setImagePath</span><span class="br0">&#40;</span><span class="st0">&quot;codebase/imgs/&quot;</span><span class="br0">&#41;</span>;
        myTree.<span class="me1">setXMLAutoLoading</span><span class="br0">&#40;</span><span class="st0">&quot;xml/directoryTree.php&quot;</span><span class="br0">&#41;</span>;
         myTree.<span class="me1">loadXML</span><span class="br0">&#40;</span><span class="st0">&quot;xml/directoryTree.php&quot;</span><span class="br0">&#41;</span>;
    <span class="br0">&#125;</span>
&nbsp;</pre>
<p>

directoryTree.php outputs directory structure in <acronym title="Extensible Markup Language">XML</acronym> format required by dhtmlxTree. In our case it outputs one level at a time based on incoming directory (as directory structure can be quite big we use <a href="http://www.dhtmlx.com/docs/products/dhtmlxTree/doc/dyn_loading.html" style="text-decoration:underline;" class="urlextern" title="http://www.dhtmlx.com/docs/products/dhtmlxTree/doc/dyn_loading.html"  rel="nofollow">dynamical loading</a>, loading just one level on request). If no directory came it ouputs starting directory (starting directory is specified in config.php included in tutorial files package. Find download link in Itroduction)
</p>

</div>
<div class="secedit"><form class="button btn_secedit" method="post" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="lines" value="10503-11799" /><input type="hidden" name="rev" value="1270025685" /><input type="hidden" name="id" value="others:toc_dhtmlx_2_0_step_by_step" /><input type="submit" value="Edit" class="button" title="Step 9. Add Tree and Populate with Data" /></div></form></div>
<h3><a name="step_10._add_grid_and_load_directory_content" id="step_10._add_grid_and_load_directory_content">Step 10. Add Grid and Load Directory Content</a></h3>
<div class="level3">

<p>
Again, we just add grid to dhtmlxLayout panel (in this case “b”) and then just work with grid  - configuring and loading data. Tutorial of dhtmlxgrid basics is available <a href="http://www.dhtmlx.com/docs/products/dhtmlxGrid/doc/step-by-step/ch_basics.html" style="text-decoration:underline;" class="urlextern" title="http://www.dhtmlx.com/docs/products/dhtmlxGrid/doc/step-by-step/ch_basics.html"  rel="nofollow">here</a>.
</p>
<pre class="code javascript">    <span class="kw2">function</span> showDList<span class="br0">&#40;</span>dir<span class="br0">&#41;</span><span class="br0">&#123;</span>
            <span class="co1">//create grid in layout</span>
        myGrid <span class="sy0">=</span> myLayout.<span class="me1">cells</span><span class="br0">&#40;</span><span class="st0">&quot;b&quot;</span><span class="br0">&#41;</span>.<span class="me1">attachGrid</span><span class="br0">&#40;</span><span class="br0">&#41;</span>;
            <span class="co1">//configure grid with script</span>
        myGrid.<span class="me1">setImagePath</span><span class="br0">&#40;</span><span class="st0">&quot;codebase/imgs/&quot;</span><span class="br0">&#41;</span>;
        myGrid.<span class="me1">setHeader</span><span class="br0">&#40;</span><span class="st0">&quot;&amp;amp;nbsp;,Name,Size,Type,Modified&quot;</span><span class="br0">&#41;</span>;
        myGrid.<span class="me1">setColTypes</span><span class="br0">&#40;</span><span class="st0">&quot;img,ro,ro,ro&quot;</span><span class="br0">&#41;</span>;
        myGrid.<span class="me1">setInitWidths</span><span class="br0">&#40;</span><span class="st0">&quot;20,250,50,100,*&quot;</span><span class="br0">&#41;</span>;
        myGrid.<span class="me1">setColAlign</span><span class="br0">&#40;</span><span class="st0">&quot;center,left,right,left&quot;</span><span class="br0">&#41;</span>;
            <span class="co1">//load directory contnet description in XML format</span>
        myGrid.<span class="me1">load</span><span class="br0">&#40;</span><span class="st0">&quot;xml/directoryContent.php?dir=&quot;</span><span class="sy0">+</span>dir<span class="br0">&#41;</span>
    <span class="br0">&#125;</span>
&nbsp;</pre>
<p>

directoryContent.php outputs directory content (based on incoming directory) in dhtmlxGrid <acronym title="Extensible Markup Language">XML</acronym> format with all necessary details for each item (file or directory): 
</p>
<ul>
<li class="level1"><div class="li"> icon file name;</div>
</li>
<li class="level1"><div class="li"> item name;</div>
</li>
<li class="level1"><div class="li"> item type (folder, text file, word document etc.);</div>
</li>
<li class="level1"><div class="li"> size;</div>
</li>
<li class="level1"><div class="li"> last modification date.</div>
</li>
</ul>

</div>
<div class="secedit"><form class="button btn_secedit" method="post" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="lines" value="11800-12989" /><input type="hidden" name="rev" value="1270025685" /><input type="hidden" name="id" value="others:toc_dhtmlx_2_0_step_by_step" /><input type="submit" value="Edit" class="button" title="Step 10. Add Grid and Load Directory Content" /></div></form></div>
<h3><a name="step_11._add_folders_and_load_directory_content" id="step_11._add_folders_and_load_directory_content">Step 11. Add Folders and Load Directory Content</a></h3>
<div class="level3">

<p>
dhtmlxFolders is used to display data items one by one based on incoming data and some visualization template. In our case, we&#039;ll use same datasource as we do for grid - directoryContent.php - and visualization templates (rendering functions) to display data items either as icons or as tiles (names are similar to Windows Explorer, so you can take a look there to see what should be the result).
</p>

<p>

Adding dhtmlxFolders to layout is as simple as in previous steps: just one command.
</p>
<pre class="code javascript">    <span class="kw2">function</span> showOtherViews<span class="br0">&#40;</span>dir<span class="br0">&#41;</span><span class="br0">&#123;</span>
            <span class="co1">//create Folders in layout</span>
        myFolders <span class="sy0">=</span> myLayout.<span class="me1">cells</span><span class="br0">&#40;</span><span class="st0">&quot;b&quot;</span><span class="br0">&#41;</span>.<span class="me1">attachFolders</span><span class="br0">&#40;</span><span class="br0">&#41;</span>;
            <span class="co1">//confugure settings</span>
        myFolders.<span class="me1">enableSelection</span><span class="br0">&#40;</span><span class="kw2">true</span><span class="br0">&#41;</span>;
        myFolders.<span class="me1">setItemTagName</span><span class="br0">&#40;</span><span class="st0">&quot;row&quot;</span><span class="br0">&#41;</span>;
            <span class="co1">//change type of items depending on required</span>
        <span class="kw1">if</span><span class="br0">&#40;</span>gl_view_type<span class="sy0">==</span><span class="st0">&quot;icons&quot;</span><span class="br0">&#41;</span><span class="br0">&#123;</span>
            myFolders.<span class="me1">setItemType</span><span class="br0">&#40;</span><span class="st0">&quot;js_generic&quot;</span><span class="sy0">,</span>rendFuncIcons<span class="br0">&#41;</span>;
            myFolders.<span class="me1">setCSSBaseName</span><span class="br0">&#40;</span><span class="st0">&quot;ficon&quot;</span><span class="br0">&#41;</span>;
        <span class="br0">&#125;</span><span class="kw1">else</span> <span class="kw1">if</span><span class="br0">&#40;</span>gl_view_type<span class="sy0">==</span><span class="st0">&quot;tiles&quot;</span><span class="br0">&#41;</span><span class="br0">&#123;</span>
            myFolders.<span class="me1">setItemType</span><span class="br0">&#40;</span><span class="st0">&quot;js_generic&quot;</span><span class="sy0">,</span>rendFuncTiles<span class="br0">&#41;</span>;
            myFolders.<span class="me1">setCSSBaseName</span><span class="br0">&#40;</span><span class="st0">&quot;ftiles&quot;</span><span class="br0">&#41;</span>;
        <span class="br0">&#125;</span>
            myFolders.<span class="me1">loadXML</span><span class="br0">&#40;</span><span class="st0">&quot;xml/directoryContent.php?dir=&quot;</span><span class="sy0">+</span>dir<span class="br0">&#41;</span>;
    <span class="br0">&#125;</span>
&nbsp;</pre>
</div>
<div class="secedit"><form class="button btn_secedit" method="post" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="lines" value="12990-14252" /><input type="hidden" name="rev" value="1270025685" /><input type="hidden" name="id" value="others:toc_dhtmlx_2_0_step_by_step" /><input type="submit" value="Edit" class="button" title="Step 11. Add Folders and Load Directory Content" /></div></form></div>
<h3><a name="step_12._activate_relations_between_left_and_right_parts" id="step_12._activate_relations_between_left_and_right_parts">Step 12. Activate Relations between Left and Right Parts</a></h3>
<div class="level3">

<p>
Attaching dhtmlxFolders to panel “b” removes grid from there (as we attach grid to panel “b” too) and visa versa. So, depending on currently selected view format (user can make a choice in toolbar) we should call either showDList or showOtherViews function to switch between view formats. And we should do this in two cases:
</p>
<ol>
<li class="level1"><div class="li"> when user clicks on some item in folders tree (load different content for same view format)</div>
</li>
<li class="level1"><div class="li"> when user changes view format through toolbar or menu (use different view format for same content)</div>
</li>
</ol>

<p>
In both cases we should use event handlers - of tree (onSelect) and of toolbar (onClick) and menu (onRadioClick as we used radiobuttons in menu for this purposes). Here is the code where I define event handlers and call same function in which I decide if to call showDList or showOtherViews. As far as menu and toolbar items use same IDs for view related items, I&#039;ll use same event handler for both.
</p>
<pre class="code javascript">  <span class="kw2">function</span> showDirContent<span class="br0">&#40;</span>dir<span class="br0">&#41;</span><span class="br0">&#123;</span>
          <span class="kw1">if</span><span class="br0">&#40;</span>gl_view_type<span class="sy0">==</span><span class="st0">&quot;dlist&quot;</span><span class="br0">&#41;</span><span class="br0">&#123;</span>
              showDList<span class="br0">&#40;</span>dir<span class="br0">&#41;</span>;
          <span class="br0">&#125;</span><span class="kw1">else</span><span class="br0">&#123;</span>
              showOtherViews<span class="br0">&#40;</span>dir<span class="br0">&#41;</span>;
          <span class="br0">&#125;</span>
  <span class="br0">&#125;</span>
&nbsp;
&nbsp;
&nbsp;
  <span class="co1">//this function we'll use for toolbar and menu event handlers</span>
  <span class="kw2">function</span> defineTypeAndLoad<span class="br0">&#40;</span>id<span class="br0">&#41;</span><span class="br0">&#123;</span>
      <span class="co1">//set global variable value depending on user choice</span>
      <span class="kw1">if</span><span class="br0">&#40;</span>id<span class="sy0">==</span><span class="st0">&quot;view_dlist&quot;</span><span class="br0">&#41;</span>
          gl_view_type<span class="sy0">=</span><span class="st0">&quot;dlist&quot;</span>;
      <span class="kw1">else</span> <span class="kw1">if</span><span class="br0">&#40;</span>id<span class="sy0">==</span><span class="st0">&quot;view_icons&quot;</span><span class="br0">&#41;</span>
          gl_view_type<span class="sy0">=</span><span class="st0">&quot;icons&quot;</span>;
      <span class="kw1">else</span> <span class="kw1">if</span><span class="br0">&#40;</span>id<span class="sy0">==</span><span class="st0">&quot;view_tiles&quot;</span><span class="br0">&#41;</span>
          gl_view_type<span class="sy0">=</span><span class="st0">&quot;tiles&quot;</span>;
      <span class="co1">//call function</span>
      <span class="kw1">if</span><span class="br0">&#40;</span>id.<span class="me1">toString</span><span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="me1">indexOf</span><span class="br0">&#40;</span><span class="st0">&quot;view&quot;</span><span class="br0">&#41;</span><span class="sy0">==</span>0<span class="br0">&#41;</span>
          showDirContent<span class="br0">&#40;</span>myTree.<span class="me1">getSelectedItemId</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#41;</span>;
  <span class="br0">&#125;</span>
&nbsp;
&nbsp;
&nbsp;
  <span class="co1">//tree event handler onSelect passes selected item ID as argument to the function. This is what we need in showDirContent, as I used directories as items IDs </span>
  myTree.<span class="me1">attachEvent</span><span class="br0">&#40;</span><span class="st0">&quot;onSelect&quot;</span><span class="sy0">,</span>showDirContent<span class="br0">&#41;</span>
&nbsp;
&nbsp;
&nbsp;
&nbsp;
  myToolbar.<span class="me1">attachEvent</span><span class="br0">&#40;</span><span class="st0">&quot;onClick&quot;</span><span class="sy0">,</span>defineTypeAndLoad<span class="br0">&#41;</span>;
  myMenu.<span class="me1">attachEvent</span><span class="br0">&#40;</span><span class="st0">&quot;onRadioClick&quot;</span><span class="sy0">,</span>defineTypeAndLoad<span class="br0">&#41;</span>;</pre>
</div>
<div class="secedit"><form class="button btn_secedit" method="post" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="lines" value="14253-16251" /><input type="hidden" name="rev" value="1270025685" /><input type="hidden" name="id" value="others:toc_dhtmlx_2_0_step_by_step" /><input type="submit" value="Edit" class="button" title="Step 12. Activate Relations between Left and Right Parts" /></div></form></div>
<h3><a name="conclusion" id="conclusion">Conclusion</a></h3>
<div class="level3">

<p>

This tutorial demonstrated how easy you can create the interface of your web application based on dhtmlxLayout.  To investigate the application code in details, please download it here: <a href="/dhtmlx/docs/lib/exe/fetch.php?media=others:dhtmlx20_tutorial.zip" class="media mediafile mf_zip" title="others:dhtmlx20_tutorial.zip">dhtmlx20_tutorial.zip</a>. You may continue coding it, extending basic functionality which was described in this tutorial and implemented in the resulting application. Final application logic was not the goal of this article, but interface built here is a good start for creating full functional File Browser.
</p>

</div>
<div class="secedit"><form class="button btn_secedit" method="post" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="lines" value="16252-" /><input type="hidden" name="rev" value="1270025685" /><input type="hidden" name="id" value="others:toc_dhtmlx_2_0_step_by_step" /><input type="submit" value="Edit" class="button" title="Conclusion" /></div></form></div>
    <!-- wikipage stop -->
  </div>

  <div class="clearer">&nbsp;</div>

  
  <div class="stylefoot">

    <div class="meta">
      <div class="user">
              </div>
     <!-- <div class="doc">
        others/toc_dhtmlx_2_0_step_by_step.txt &middot; Last modified: 2010/03/31 11:54 (external edit)      </div>
    </div>-->

   
    <!--<div class="bar" id="bar__bottom">-->
      <!--<div class="bar-left" id="bar__bottomleft">-->
        <!--<form class="button btn_edit" method="post" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="" /><input type="hidden" name="id" value="others:toc_dhtmlx_2_0_step_by_step" /><input type="submit" value="Edit this page" class="button" accesskey="e" title="Edit this page [E]" /></div></form>-->
        <!--<form class="button btn_revs" method="get" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="revisions" /><input type="hidden" name="id" value="others:toc_dhtmlx_2_0_step_by_step" /><input type="submit" value="Old revisions" class="button" accesskey="o" title="Old revisions [O]" /></div></form>-->
      <!--</div>-->
      <!--<div class="bar-right" id="bar__bottomright">-->
        <!---->
        <!---->
        <!---->
        <!---->
        <!---->
        <!--<form class="button btn_index" method="get" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="index" /><input type="hidden" name="id" value="others:toc_dhtmlx_2_0_step_by_step" /><input type="submit" value="Index" class="button" accesskey="x" title="Index [X]" /></div></form>-->
        <!--<a class="nolink" href="#dokuwiki__top"><input type="button" class="button" value="Back to top" onclick="window.scrollTo(0, 0)" title="Back to top" /></a>&nbsp;-->
      <!--</div>-->
      <!--<div class="clearer"></div>-->
    <!--</div>-->

  </div>

  

</div>

<div class="footerinc">


</div>

<div class="no"><img src="/dhtmlx/docs/lib/exe/indexer.php?id=others%3Atoc_dhtmlx_2_0_step_by_step&amp;1310730718" width="1" height="1" alt=""  /></div>
     <div class="footer">
        <div class="footer-logo"></div>
        <div class="copyright">Copyright © 1998-2011 DHTMLX LTD.<br />All rights reserved.</div>
        <form class="button btn_edit" method="post" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="" /><input type="hidden" name="id" value="others:toc_dhtmlx_2_0_step_by_step" /><input type="submit" value="Edit this page" class="button" accesskey="e" title="Edit this page [E]" /></div></form>    	    </div>
</body>
</html>
